<!-- 修改后的 MainLayout.vue -->
<template>
  <nav class="top-navbar" :class="{ fixed: isSticky }">
   <div class="back">
     <button>&lt;</button>
   </div>
   <div class="nav-right">
     <a href="/main/home" class="nav-link">首页</a>
     <a href="#" class="nav-link">个人中心</a>
     <a href="/main/cart" class="nav-link">购物车</a>
     <a href="#" class="nav-link">收藏夹</a>
     <a href="#" class="nav-link">帮助中心</a>
     <button class="sign-in-button" @click="showLoginDialog = true">Sign in</button>
        <button class="register-button" @click="showRegisterDialog = true">Register</button>
        <button v-if="isLoggedIn" class="sign-out-button" @click="logout">Sign out</button>
   </div>
 </nav>
<div class="main-container">
 <!-- 顶部标题 -->
 <div class="header">
   <h1>我的校麦</h1>
   <div class="breadcrumb">我的校麦 > {{ currentRouteName }}</div>
 </div>

 <div class="content-wrapper">
   <!-- 左侧导航 -->
   <nav class="sidebar">
     <div class="nav-group">
       <h3 class="group-title">用户中心</h3>
       <router-link 
              :to="{ path: '/main/profile/user-center/orders' }"
              class="nav-item"
              :class="{ active: $route.path.includes('/user-center') }"
            >
              订单管理
            </router-link>
     </div>
     
     <div class="nav-group">
       <h3 class="group-title">账户中心</h3>
       <router-link 
              v-for="item in accountMenus"
              :key="item.path"
              :to="`/main/profile/account-center/${item.path}`"
              class="nav-item"
              :class="{ active: $route.path.includes(`/account-center/${item.path}`) }"
            >
              {{ item.name }}
            </router-link>
     </div>
   </nav>

   <!-- 主要内容 -->
   <main class="main-content">
     <router-view v-slot="{ Component }">
       <transition name="fade">
         <component :is="Component" />
       </transition>
     </router-view>
   </main>
 </div>

 <!-- 底部链接 -->
 <footer class="footer-links">
   <div class="link-group">
     <a>关于校麦</a>
     <a>协议及隐私权政策</a>
     <a>廉正举报</a>
     <a>联系合作</a>
   </div>
   <div class="link-group">
     <a>招聘信息</a>
     <a>防骗秘籍</a>
     <a>商户入驻</a>
   </div>
   <div class="copyright">© 2003-2023 大麦网</div>
 </footer>
 
</div>
<LoginDialog v-if="showLoginDialog" @close="showLoginDialog = false" />
     <RegisterDialog v-if="showRegisterDialog" @close="showRegisterDialog = false" />
</template>

<script setup>

import { useRoute } from 'vue-router'
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import LoginDialog from "../../components/LoginDialog.vue";
import RegisterDialog from '../../components/RegisterDialog.vue';
const showLoginDialog = ref(false);
const showRegisterDialog = ref(false);
const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true');

// 退出登录
const logout = () => {
  localStorage.removeItem('isLoggedIn');
  localStorage.removeItem('currentUser');
  isLoggedIn.value = false;
  ElMessage.success('退出成功');
};

const accountMenus = ref([
  { path: 'address', name: '收货地址' },
  { path: 'settings', name: '账号设置' },
  { path: 'profile', name: '个人信息' },
  { path: 'ticket-buyer', name: '常用购票人管理' }
])

const route = useRoute()
const currentRouteName = computed(() => route.name || '')
</script>
  
<style scoped>
/* 确保页面整体铺满 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 导航栏样式 */
.top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f4f4f4;
  padding: 10px 20px;
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保在最上层 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 主容器样式 */
.main-container {
  min-height: 100vh;
  background: #fff;
  padding-top: 60px; /* 为导航栏留出空间 */
}

/* 内容区域样式 */
.content-wrapper {
  display: flex;
  min-height: calc(100vh - 60px); /* 减去导航栏高度 */
}

/* 左侧导航栏样式 */
.sidebar {
  width: 240px; /* 增加宽度 */
  padding: 20px 0;
  border-right: 1px solid #eee;
  background-color: #f9f9f9; /* 背景色 */
  position: fixed; /* 固定定位 */
  top: 60px; /* 与导航栏对齐 */
  bottom: 0;
  left: 20px; /* 向右移动 20px */
  overflow-y: auto; /* 允许滚动 */
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 顶部标题样式 */
.header {
  padding: 20px 30px;
  border-bottom: 1px solid #eee;
  margin-left: 260px; /* 向右移动，与左侧导航栏对齐 */
}

.header h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.breadcrumb {
  color: #999;
  font-size: 12px;
}

/* 主要内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px; /* 减少内边距 */
  margin-left: 260px; /* 向右移动，与左侧导航栏对齐 */
  max-width: 1200px; /* 限制最大宽度 */
  margin-right: auto; /* 居中 */
  margin-top: -20px; /* 向上移动 */
}

/* 底部链接样式 */
.footer-links {
  border-top: 1px solid #eee;
  padding: 30px;
  text-align: center;
  margin-left: 260px; /* 向右移动，与左侧导航栏对齐 */
}

/* 其他样式保持不变 */
.nav-link:hover {
  color: white;
  background-color: #333;
  border-radius: 20%;
}

.fixed {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #f4f4f4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-link {
  margin-right: 20px;
  text-decoration: none;
  color: #333;
}

.sign-in-button,
.register-button {
  background-color: #333;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.nav-group {
  margin-bottom: 30px;
}

.group-title {
  color: #999;
  font-size: 14px; /* 增大字体 */
  padding: 0 30px;
  margin-bottom: 16px; /* 增加间距 */
  font-weight: 500; /* 加粗 */
}

.nav-item {
  display: block;
  padding: 16px 30px; /* 增加内边距 */
  color: #333;
  transition: all 0.3s;
  position: relative;
  margin: 8px 0; /* 增加上下间距 */
  border-radius: 8px; /* 添加圆角 */
}

.nav-item.active {
  color: #230303;
  background: #fff5f7;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #230303;
}

.empty-state {
  text-align: center;
  padding: 100px 0;
}

.empty-image {
  width: 200px;
  margin-bottom: 20px;
}

.empty-text {
  color: #666;
  font-size: 14px;
}

.nav-item:hover {
  background-color: #f0f0f0; /* 悬停背景色 */
}

.link-group {
  margin-bottom: 12px;
}

.link-group a {
  color: #999;
  font-size: 12px;
  margin: 0 12px;
  cursor: pointer;
}

.link-group a:hover {
  color: #230303;
}

.copyright {
  color: #ccc;
  font-size: 12px;
  margin-top: 20px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>